import React from 'react';
class TableView extends React.Component{
	
	constructor(props){
		super(props);
		this.state = {
			isFirstLoading: true
		}
	}
	
	componentWillReceiveProps(){
		// 列表只有在第一次挂载的时候，isFirstLoading为true，其他情况为false
		this.setState({
			isFirstLoading : false
		});
	}
	render(){
		
		const tbodyError = (
			<tr>
				<td colSpan='5' className="text-center">
					{this.state.isFirstLoading ? '正在加载数据...' : '没有找到相应的结果~'}
				</td>
			</tr>
		)
		const theaders = (
			<tr>
			{
				this.props.theaders.map((v,i) => {
					return(<th key={i}>{v}</th>)
				})
			}
			</tr>
		)
		const tbody = this.props.children.length > 0 ? this.props.children :tbodyError;
		
		return (
			<div className="table-responsive">
				<table className="table table-striped table-bordered">
					<thead>
						{theaders}
					</thead>
				<tbody>
					{tbody}
				</tbody>
				</table>
			</div>
		)
	}
}

export default TableView;